<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/public.css">
    <meta charset="UTF-8">
    <title>流程审批</title>
    <style>
        .box{
            width:50%;
            min-height:50px;
            text-align: center;
            position: relative;
        }
        .container{
            background:rgb(46,182,185);
            padding:6% 0 8%;
            position: relative;
        }
        .itembox{
            position: relative;
        }
        .item{
            z-index:-1;
            border-right:1px solid rgb(233,233,233);
            border-bottom:1px solid rgb(233,233,244);
            position: absolute;
        }
        .pic1{
            width:40%;
            margin:0 auto;
            display: block;
        }
        /*.pic1:before{
            content: "1";
            width:12px;
            height: 12px;
            background: #f00;
            border-radius: 50%;
            position: absolute;
            right:12px;
            top:12px;
        }*/
        .text1{
            font-size:14px;
            color:#fff;
        }
        .pic2{
            width:60%;
            display:block;
            margin:0 auto;
            padding-top:12%;
        }
        .text2{
            line-height: 20px;
            font-size: 12px;
            text-align: center;
        }
        .pic2:last-child{
            padding-top: 20%;
        }
        h1{
            color:#fff;
        }
        .tleheader{
            background: rgb(46,182,185);
            border:none;
        }
        .point{
            width:14px;
            height:14px;
            border-radius: 50%;
            background: #f00;
            position: absolute;
            top:0;
            right:28%;
            color:#fff;
            font-size: 10px;
        }
        .logo{
            width:35%;
            display: block;
            margin: 0 auto;
        }
        .fs14cg{
            font-size: 14px;
            color:rgb(240,240,240);
        }
        .fs12{
            font-size:12px;
            line-height:12px;
        }
        .pdy4{
            margin:10px 0;
        }
        .itembox2{
            position: relative;
            width:20%;
        }
        .fb{
            padding:2px 0;
        }
        .itembox2 .picb{
            width:40%;
            display:block;
            margin:0 auto;
            padding-top:6%;
        }
        .textb{
            font-size: 8px;
        }

        .icon{
            width:20px;
            margin-bottom: -5px;
        }
        .search{
            width:96%;
            margin:10px auto;
            background: rgb(255,255,255);
            text-align: center;
            color:rgb(180,180,180);
            border-radius: 4px;
            font-size: 16px;
            padding:6px 0;
        }
        .txl{
            width:47%;
            margin:2px 1% 0px 2%;
            text-align: center;
            background:rgb(255,255,255);
            font-size: 16px;
            padding:8px 0;
        }
        .xx{
            width:47%;
            margin:2px 2% 0px 1%;
            text-align: center;
            background:rgb(255,255,255);
            font-size: 16px;
            padding:8px 0;
        }
        body{
            background:rgb(233,233,233);
        }
        .px50{
            width:50px;
            padding:4px 1em 0 1em;
        }
        .h60{
            height: 60px;
            line-height: 60px;
        }
        .h30{
            line-height: 22px;
        }
        .pdt4{
            padding-top:6px;
        }
        .ti{
            text-indent: 1em;
        }
        .bd{
            border: 1px solid rgb(45,181,185);
            border-radius: 3px;
            padding:0 3px;
        }
    </style>
</head>
<body>
<header class="tleheader">
    <p class="backbtn"><a style="margin:0; text-decoration: none">
        <img src="../icon/arrow/zjt.PNG" class="backpic" alt="">
        <span>通讯录</span></a>
    </p>
    <h1 class="tc">手机通讯录</h1>
    <p class="somebtn"><a href="rmq.html">
    <img src="../xiangmuquan/button+.PNG" class="backpic" alt=""></a>
    </p>
</header>
<div style="height:80%;">
    <div class="search">
        <img src="../renmaiquan/search.PNG" class="icon" />
        搜索
    </div>
    <div style="width:100%;">
        <p style="text-indent:2em;">A</p>
        <div class="bgw h60 bb">
            <!--<img src="../icon/bighead.PNG" class="px50 fl" alt="">-->
            <div class="w80 fl">
                <p class="ti h30 pdt4">angel</p>
                <p class="ti h30 fs14 cg">12345678901</p>
            </div>
            <div class="w20 fl">
                <span class="cg fs14">已添加</span>
            </div>
            <div class="clear"></div>
        </div>
        <div class="bgw h60 bb">
            <!--<img src="../icon/bighead.PNG" class="px50 fl" alt="">-->
            <div class="w80 fl">
                <p class="ti h30 pdt4">angel</p>
                <p class="ti h30 fs14 cg">12345678901</p>
            </div>
            <div class="w20 fl">
                <span class="bd fs14">邀请</span>
            </div>
            <div class="clear"></div>
        </div>
        <p style="text-indent:2em;padding-top:8px;">b</p>
        <div class="bgw h60 bb">
            <!--<img src="../icon/bighead.PNG" class="px50 fl" alt="">-->
            <div class="w80 fl">
                <p class="ti h30 pdt4">angel</p>
                <p class="ti h30 fs14 cg">12345678901</p>
            </div>
            <div class="w20 fl">
                <span class="bd fs14">添加</span>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>

<script type="text/javascript" src="../js/back.js"></script>
<script>
    var bw = document.body.offsetWidth;
    var btnbox = document.getElementsByClassName("btnbox");
    var btnicon = document.getElementsByClassName("btnicon");
    for(var i = 0; i < btnbox.length; i++){
        btnbox[i].style.height = bw/4 + "px";
        btnicon[i].style.paddingTop = bw/4/10+"px";
    }
    //    btnicon[btnbox.length-1].style.lineHeight = bw/4 + "px";
    //    btnicon[btnbox.length-1].style.paddingTop = bw/4/5+"px";
</script>
</body>
</html>